﻿<div id="cart">
    <div class="ng-scope">
        <!--购物车空提示-->
        <div class="cartempty ng-scope" v-show="cartItemList.length == 0">
            <h3>亲，购物车空空的呢~</h3>
            <a href="#">去逛逛</a>
        </div>
        <!--/购物车空提示-->

        <div class="cartpay ng-scope ">
            <section class="prolist_section">
                <ul id=" prolist" class="lists">
                    <li price="2.98" v-for="(cart, i) in cartItemList" :name="cart.id" :id="cart.goodsId" :flag="cart.status==1?'cart':'hide'" >
                        <div class="l view">
                            <a href="#" target="_blank"><img :src="cart.goodsLogo" class="img-responsive" alt="..." /></a>
                        </div>
                        <div class="r">
                            <p class="t">{{cart.goodsName}}</p>
                            <p class="price">￥{{cart.price}}</p>
                            <div class="jifen">送积分：0</div>
                            <div class="showaddcart">
                                <div class="num_con" v-show="cart.status == 1">
                                    <img @click="add(0, cart.id, cart.price)" src="img/num_l.png" :left="cart.goodsId"  class="img-responsive num_l" alt="..." />
                                    <span :number="cart.id" class="number">{{cart.number}}</span>
                                    <img @click="add(1, cart.id, cart.price)" src="img/num_r.png" :right="cart.goodsId" class="img-responsive num_r" alt="..." />
                                </div>
                                <div class="num_con" v-show="cart.status != 1">已售罄</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </section>
            <!--底部结算导航-->
            <div class="cart ng-scope" style="margin-bottom: 50px;">
                <div id="commit" class="r"><a href="#" onclick="">提交订单</a></div>
                <div class="l ng-binding c">
                    ￥<label id="totalmoney">{{cartInfo.price}}</label>
                    <span class="font11 points">本次消费获得积分：0</span>
                </div>
                <i id="totalcartnumber" class="ng-binding cartnum">{{cartInfo.number}}</i>
            </div>
            <!--/底部结算导航-->
        </div>
    </div>
</div>
<script type="text/javascript" src="js/custom.js"></script>
<script>
    var vm = new Vue({
        el: "#cart",
        data: {
            cartItemList:[],
            cartInfo:{}
        },
        methods: {
            add(flag, id, price){ //购物车＋-
                if(flag == 1){//+1
                    var i = parseInt($(".showaddcart span[number=" + id +"]").text());
                    $(".showaddcart span[number=" + id +"]").text(i+1);
                    //购物车该商品加1
                    addCartById(id);
                }
                if(flag == 0){//-1
                    var j = parseInt($(".showaddcart span[number=" + id +"]").text());
                    $(".showaddcart span[number=" + id +"]").text(j-1);
                    if(j == 1) {//减到0
                        $("ul li[name=" + id + "]").hide();//隐藏
                        $("ul li[name=" + id + "]").attr("flag", "hide");//提交订单不包含该商品
                    }
                    //购物车减1
                    subtractCartById(id);
                }
                //计算总价
                CountNumPrice(flag, price);
                changeCommit();
            }
        }
    })
    $(function () {
        getAllCartItems();
        getCartInfo();
    })
    //获取购物车所有商品
    function getAllCartItems() {
        let url = "cartItem/doFindAllCartItems";
        $.getJSON(url, function (result) {
            console.log(result);
            vm.cartItemList = result.data;
        })
    }
    //获取购物车信息（提交订单）
    function getCartInfo(){
        let url = "cartItem/doFindCartInfo";
        $.getJSON(url, function (result) {
            console.log(result);
            vm.cartInfo = result.data;
        })
        setTimeout("changeCommit()", 200);
    }
    //计算价格
    function CountNumPrice(flag, price) {
        var num = parseInt($("#totalcartnumber").text());
        var p = parseFloat($("#totalmoney").text());
        if(flag == 1){//+
            $("#totalmoney").text(p + price);
            $("#totalcartnumber").text(num + 1);
        }else{//-
            $("#totalmoney").text(p - price);
            $("#totalcartnumber").text(num - 1);
        }
    }
    function addCartById(id) {
        let url = "cartItem/doAddCartItemById";
        let params = {
            id: id
        }
        $.post(url, params, function (result) {
            console.log(result);
        })

    }
    function subtractCartById(id) {
        let url = "cartItem/doSubtractCartItemById";
        let params = {
            id: id
        }
        $.post(url, params, function (result) {
            console.log(result);
        })

    }
    //提交订单
    function commit() {
        var list = $("ul li[flag=cart]");
        var goodsIds = "";
        $.each(list, function (index, item) {
            var goodsId = $(item).prop("id");
            goodsIds += goodsId + ",";
        })
        goodsIds = goodsIds.substr(0, goodsIds.length-1);
        console.log(goodsIds);
        var params = {
            goodsIds: goodsIds,
            orderPrice: parseFloat($("#totalmoney").text()),
            number: parseInt($("#totalcartnumber").text()),
            orderEatType: 0,
        }
        layer.confirm("确定支付吗",
            {
                btn: ['确定', '取消'],
                title: "提示",
                btn1: function (index) {
                    params.orderStatus = 1;
                    console.log(params);
                    saveOrderMaster(params);
                    layer.close(index)
                },
                btn2: function () {
                    params.orderStatus = 0;
                    console.log(params);
                    saveOrderMaster(params);
                }
            }
        )
    }
    function saveOrderMaster(params) {
        var url = "order/doSaveOrderMaster";
        $.post(url, params, function (result) {
            alert(result.message);
            $("#mainContent").load("doCartUI");
            console.log(result)
        })
    }
  	//判断有没有选中商品
    function changeCommit(){
    	if(parseInt($("#totalcartnumber").text()) == 0){
        	$("#commit").css("opacity", "0.5");
        	$("#commit a").attr('onclick', '');
        }else{
        	$("#commit").css("opacity", "1");
        	$("#commit a").attr('onclick', 'commit()');
        }
    }

</script>

